<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" @submit.native.prevent="saveArtice">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formData.title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="desc">
        <el-input type="textarea" v-model="formData.desc"></el-input>
      </el-form-item>
      <el-form-item label="文章avatar" prop="avatar">
        <el-input type="textarea" v-model="formData.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">立即创建</el-button>
        <el-button @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
    <template slot="header">upload demo</template>
    <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false" :on-progress="handleProgress"
      :on-change="handleChange" :on-success="handleSuccess" :before-upload="beforeUpload" :multiple="true">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <div class="file-list" v-for="(item, index) in fileList" :key="index">
      <div class="file-left">
        <img v-if="pdfTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon"
          src="@/assets/hk-icon/uploadfile/pdf.png" />
        <img v-else-if="wordTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon"
          src="@/assets/hk-icon/uploadfile/word.png" />
        <img v-else-if="excleTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon"
          src="@/assets/hk-icon/uploadfile/excle.png" />
        <img v-else-if="pptTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon"
          src="@/assets/hk-icon/uploadfile/ppt.png" />
        <img v-else-if="imageTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon"
          src="@/assets/hk-icon/uploadfile/image.png" />
        <img v-else-if="ysbTypeList.indexOf(getFileType(item.name)) > -1" class="file-icon"
          src="@/assets/hk-icon/uploadfile/ysb.png" />

        <div class="file-name" @click="fileClick(item)">{{ item.name }}</div>
      </div>
      <el-progress v-if="item.progressFlag" class="fiel-progress" :stroke-width="10" :percentage="item.progressPercent">
      </el-progress>
      <el-progress v-else class="fiel-progress" color="rgb(92, 184, 122)" :stroke-width="10" :percentage="100">
      </el-progress>
      <div class="file-menu-icon">
        <i class="file-success el-icon-circle-check"></i>
        <i class="file-delete el-icon-delete" @click="deleteFile(index)"></i>
        <i class="file-download el-icon-download" @click="downloadFile(item)"></i>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        title: "",
        desc: "",
      },
      rules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        desc: [{ required: true, message: "请填写文章内容", trigger: "blur" }],
      },
      uploadAction: 'http://localhost:3005/uploads',
      fileList: [], // 文件列表
      imageTypeList: ['jpg', 'png', 'jpeg', 'gif', 'webp'], // 图片类型
      wordTypeList: ['doc', 'docx'], // word类型
      pptTypeList: ['ppt', 'pptx'], // ppt类型
      excleTypeList: ['xls', 'xlsx'], // excle类型
      pdfTypeList: ['pdf'], // pdf类型
      ysbTypeList: ['rar', 'zip', '7z'], // 压缩包类型
      dialogVisible: false, // 图片预览弹窗
      dialogImageUrl: '' // 图片预览路径
    };
  },
  methods: {
    saveArtice() {
      this.$http.post("/addArticle", this.formData).then((res) => {
        if (res.data.code === "01") {
          this.$message({
            message: res.data.message,
            type: "success",
          });
        } else {
          this.$message({
            message: res.data.message,
            type: "error",
          });
        }
      });
      this.$router.push("/article/list");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


    // 获取文件后缀名
    getFileType(name) {
      return name.substring(name.lastIndexOf('.') + 1, name.length)
    },

    // 点击文件名查看
    fileClick(file) {
      console.log(file)
      const a = document.createElement('a')
      const tempFileType = this.getFileType(file.name)

      if (this.imageTypeList.indexOf(tempFileType) > -1) { // image
        this.dialogImageUrl = file.response.url
        this.dialogVisible = true
      } else if (this.pdfTypeList.indexOf(tempFileType) > -1) { // pdf
        a.setAttribute('href', file.response.url)
        // a.setAttribute('href', 'http://localhost:3000/uploads/123.pdf')
        a.setAttribute('target', '_blank')
        document.body.appendChild(a)
        a.click()
      } else if (this.wordTypeList.indexOf(tempFileType) > -1) { // word
        console.log('word')
        const word = 'http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=' + file.response.url
        a.setAttribute('href', word)
        // a.setAttribute('href', 'http://localhost:3000/uploads/123.pdf')
        a.setAttribute('target', '_blank')
        document.body.appendChild(a)
        a.click()
      } else if (this.excleTypeList.indexOf(tempFileType) > -1) { // excle
        console.log('excle')
      } else if (this.pptTypeList.indexOf(tempFileType) > -1) { // ppt
        console.log('ppt')
        const ppt = 'https://view.officeapps.live.com/op/view.aspx?src=' + file.response.url
        a.setAttribute('href', ppt)
        // a.setAttribute('href', 'http://localhost:3000/uploads/123.pdf')
        a.setAttribute('target', '_blank')
        document.body.appendChild(a)
        a.click()
      } else if (this.ysbTypeList.indexOf(tempFileType) > -1) { // ysb
        console.log('ysb')
      }
    },

    // 上传前-钩子
    beforeUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      console.log(file)
      // return isJPG && isLt2M;
    },

    // 上传中-钩子
    handleProgress(event, file, fileList) {
      console.log(fileList)
      fileList.forEach(item => {
        console.log(item)
        if (item.percentage === 100) {
          console.log(213);
        }
        else {
          item.progressFlag = true
          item.progressPercent = Math.abs(item.percentage.toFixed(0))
        }
      })
      this.fileList = fileList
    },

    // 上传成功-钩子
    handleSuccess(res, file, fileList) {
      fileList.forEach((item) => {
        console.log(item)
        if (item.status === 'success') {
          item.progressFlag = false
        }
      })
      this.fileList = fileList
    },

    // 文件列表改变-钩子
    handleChange(file, fileList) {
      this.fileList = fileList
    },

    // 删除文件
    deleteFile(index) {
      this.fileList.splice(index, 1)
    },

    // 下载文件
    downloadFile(item) {
      console.log('下载文件', item)
    }
  },
};
</script>

<style>
.file-list {
  display: flex;
  justify-content: space-between;
  width: 600px;
  padding: 10px;
  line-height: 20px;
  align-items: center;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0s;
  border-bottom: 1px solid #eee;
}

.file-list .file-left {
  display: flex;
  align-items: center;
}

.file-list .file-left .file-icon {
  width: 15px;
  height: 15px;
}

.file-list .file-left .file-name {
  color: #606266;
  padding-left: 4px;
  width: 200px;
}

.file-list .fiel-progress {
  width: 200px;
}

.file-list .file-menu-icon {
  display: flex;
  width: 100px;
}

.file-list .file-menu-icon .file-success {
  margin-left: 60px;
  color: #67c23a;
}

.file-list .file-menu-icon .file-delete {
  display: none;
}

.file-list .file-menu-icon .file-download {
  display: none;
}

.file-list:hover {
  background: #eee;
}

.file-list:hover .file-name {
  color: #409eff;
}

.file-list:hover .file-menu-icon {
  display: flex;
  justify-content: flex-end;
}

.file-list:hover .file-menu-icon .file-success {
  display: none;
}

.file-list:hover .file-menu-icon .file-delete {
  display: block;
  margin: 0 10px;
  color: #F56C6C;
}

.file-list:hover .file-menu-icon .file-download {
  display: block;
  color: #409EFF;
}
</style>